﻿@model Demo.Model.EntityModels.Person

@{
    ViewBag.Title = "List of Person";
}
<div class="box_content">
    <div class="form_content">
        <div class="clear_both"></div>
        <div id="PersonTableContainer" style="width: 100%;">
        </div>
        <div id="updateDialog">
        </div>
        <button id="submit" style="display: none" class="editLink" href="#">
        </button>
    </div>
</div>
<script type="text/javascript">

    var cachedCityOptions = null;
    //Jtable List User
    $(document).ready(function () {
        var vietnamMessages = {
            serverCommunicationError: 'Không thể kết nối đến server.',
            loadingMessage: 'Đang tải...',
            noDataAvailable: 'Dữ liệu trống!',
            addNewRecord: '+ Tại mới',
            editRecord: 'Chỉnh sửa',
            areYouSure: 'Bạn có chắc chắn?',
            deleteConfirmation: 'Bạn có chắc chắn muốn xóa?',
            save: 'Lưu',
            saving: 'Đang tải',
            cancel: 'Hủy',
            deleteText: 'Xóa',
            deleting: 'Đang xóa',
            error: 'Lỗi',
            close: 'Đóng',
            cannotLoadOptionsFor: 'Can not load options for field {0}',
            pagingInfo: 'Hiển thị {0}-{1} trên tổng số {2} dòng',
            pageSizeChangeLabel: 'Tổng số',
            gotoPageLabel: 'Đến trang',
            canNotDeletedRecords: 'Can not deleted {0} of {1} records!',
            deleteProggress: 'Xóa {0} trên tổng số {1} dòng, đang xử lý...'
        };


        $('#PersonTableContainer').jtable({
            messages: vietnamMessages,
            title: 'Danh sách Person',
            paging: true,
            pageSize: 25,
            columnResizable: false,
            sorting: true,
            multiSorting: true,
            defaultSorting: 'name ASC',
            actions: {
                listAction: '/Person/PersonList',
                deleteAction: '/Person/DeletePerson'
            },
            fields: {
                id: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                name: {
                    title: 'Tên',
                    width: '30%'
                },
                Edit: {
                    title: 'Sửa',
                    width: '5%',
                    sorting: false,
                    display: function (data) {
                        return '<button class="jtable-command-button jtable-edit-command-button" type="button" onclick="Edit(' + data.record.id + ')"></button> ';
                    }
                }
            },
            recordsLoaded: function (event, data) {
                //Event double row
                $('.jtable-data-row').dblclick(function () {
                    var row_id = $(this).attr('data-record-key');
                    Edit(row_id);
                });
            },
            formSubmitting: function (event, data) {
                return data.form.validationEngine('validate');
            },
            formClosed: function (event, data) {
                data.form.validationEngine('hide');
                data.form.validationEngine('detach');
            }
        });

        //Load User list from server
        $('#PersonTableContainer').jtable('load');

        //Add button "Add new record"
        $('.jtable-toolbar').append("<span class='jtable-toolbar-item jtable-toolbar-item-add-record'>" +
	                                    "<span class='jtable-toolbar-item-icon'></span>" +
	                                    "<span class='jtable-toolbar-item-text' onclick='Edit(0); return false;'>Tạo mới</span>" +
                                    "</span>");
        //$('.jtable-bottom-panel').append("<div class='jtable-right-area'><span class='jtable-add-record'><a href='#'  onclick='Edit(0)'>+ Add new record</a></span></div>");
    });

    //Edit User
    function Edit(id) {
        if (id == 0) {
            $("#ui-id-3").text("Tạo mới");
        }
        else {
            $("#ui-id-3").text("Chỉnh sửa");
        }
        document.getElementById("submit").setAttribute("href", "/Person/Edit/" + id);
        document.getElementById("submit").click();
    }

</script>

